<template>
  <!-- 数值统计 -->
  <div class="number-static">
    <div class="number-item">
      <div>
        <p class="number-type">累计学习主题</p>
        <p class="number-count">1410</p>
      </div>
      <el-icon>
        <Notebook />
      </el-icon>
    </div>
    <div class="number-item">
      <div>
        <p class="number-type">累计学习人/次</p>
        <p class="number-count">1410</p>
      </div>
      <el-icon>
        <Avatar />
      </el-icon>
    </div>
    <div class="number-item">
      <div>
        <p class="number-type">覆盖学习单位数</p>
        <p class="number-count">1410</p>
      </div>
      <el-icon>
        <UserFilled />
      </el-icon>
    </div>
  </div>

  <!-- 年度统计 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header chart-toobar">
        <div>
          <span>年度学习统计</span>
          <el-date-picker
            v-model="yearValue"
            type="year"
            placeholder="请选择要统计的年份"
            style="margin-left: 20px;"
          />
        </div>
        
        <div class="chart-button">

          <el-icon title="导出">
            <Download />
          </el-icon>
        </div>
      </div>
    </template>

    <div class="year-chart" id="yearChart" style="height: 400px;">
    </div>

  </el-card>

  <!-- 主题和各区统计 -->
  <!-- <div class="theme-area">
    <el-card class="box-card theme-card">
      <template #header>
        <div class="card-header">
          <span>主题统计</span>
        </div>
      </template>

      <div class="year-chart" id="themeChart" style="height: 400px;">
      </div>
    </el-card>

    <el-card class="box-card area-card">
      <template #header>
        <div class="card-header">
          <span>各区学习统计</span>
        </div>
      </template>

      <div class="year-chart" id="areaChart" style="height: 400px;">
      </div>
    </el-card>
  </div> -->

  <!-- 各区学习统计 -->
  <el-card class="box-card area-card">
    <template #header>
      <div class="card-header chart-toobar">
        <div>
          <span>各区学习统计</span>
          <el-date-picker
            v-model="areaValue"
            type="year"
            placeholder="请选择要统计的年份"
            style="margin-left: 20px;"
          />
        </div>
        <div class="chart-button">

          <el-icon title="导出">
            <Download />
          </el-icon>
        </div>
      </div>
    </template>

    <div class="year-chart" id="areaChart" style="height: 400px;">
    </div>
  </el-card>

  <!-- 一学一报列表 -->
  <el-card class="box-card area-card">
    <template #header>
      <div class="card-header">
        <div>
          <span>一学一报列表</span>
        </div>
      </div>
    </template>

    <div class="table-data">
      <el-table
        :data="learnReportData"
        stripe
        borderresizable
        highlight-hover-row
        show-overflow
        keep-source
      >
        <el-table-column
          v-for="(tableItem, tableIndex) in learnReportTableColumns" :key="tableIndex"
          :prop="tableItem.field"
          :label="tableItem.label"
          :min-width="tableItem.minWidth"
        ></el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
export default { name: 'backendLearnStatic' }
</script>

<script setup>
import { Notebook, Avatar, UserFilled, Histogram, Grid, Download } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
  getYearChart()
  /* getThemeChart() */
  getAreaChart()
})

/* 年度统计所选年份 */
const yearValue = ref("")
/* 年度统计图表 */
const getYearChart = () => {
  let myChart = echarts.init(document.getElementById('yearChart'));
  
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'Precipitation',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: 'Temperature',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C'
        }
      }
    ],
    series: [
      {
        name: 'Evaporation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: 'Precipitation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: 'Temperature',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' °C';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  });
}

/* 主题统计图表 */
const getThemeChart = () => {
  let myChart = echarts.init(document.getElementById('themeChart'));
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
}

/* 各区统计所选年份 */
const areaValue = ref("")
/* 各区统计图表 */
const getAreaChart = () => {
  let myChart = echarts.init(document.getElementById('areaChart'));
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'Precipitation',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: 'Temperature',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C'
        }
      }
    ],
    series: [
      {
        name: 'Evaporation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: 'Precipitation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: 'Temperature',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' °C';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  });
}

/* 一学一报列表 */
const learnReportData = reactive([])
/* 一学一报列表字段 */
const learnReportTableColumns = reactive([
  { field: "name", label: "区名", minWidth: "120" },
  { field: "learnCount", label: "学习人数", minWidth: "120" },
  { field: "zhuchiren", label: "主持人", minWidth: "120" },
  { field: "fayanren", label: "主讲人、发言人", minWidth: "140" },
  { field: "learnTime", label: "学习时间", minWidth: "120" },
  { field: "learnContent", label: "学习内容", minWidth: "120" },
  { field: "learnType", label: "学习形式", minWidth: "120" },
])

</script>


<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";


/* 数值统计 */
.number-static{
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  .number-item{
    border-radius: 4px;
    height: 100px;
    padding: 12px;
    box-sizing: border-box;
    width: 32%;
    background-color: #ffffff;
    position: relative;
    display: flex;
    justify-content: space-between;
    .number-count{
      margin-top: 12px;
      font-size: 28px;
      font-weight: bold;
      color: var(--theme-color);
    }
    .number-percentage{
      font-size: 12px;
    }
    :deep(.el-icon){
      font-size: 36px;
      margin: 12px 8px 0 0;
      color: #9AA0AC;
    }
  }
}

.box-card {
  height: auto;
  margin-bottom: 16px;
}
.chart-toobar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  :deep(.el-icon){
    margin-left: 12px;
    font-size: 18px;
  }
}

/* 主题+年度 */
.theme-area {
  display: flex;
  justify-content: space-between;
  .theme-card{
    width: 39%;
  }
  .area-card{
    width: 60%;
  }
}
</style>